<!DOCTYPE html> 
 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>动画效果</title> 
    <style type="text/css">
 
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){
         var $domoObj = $('#fontTest');


        $('#swich button').click(function(event) {
          var num = parseFloat($domoObj.css('fontSize'));
          if(this.id == 'setBigFontSize')
          {
            num *= 1.4;
          }
          else if (this.id == 'setSmallFontSize') 
          {
            num /= 1.4;
          }
          else
          {
              alert("操作错误，请重试！");
              return;
          }

          $domoObj.css({
            'fontSize': num + 'px'
          });

        });


        $('p').eq(1).hide();

        $('a.more').click(function(event) {
          event.preventDefault();
          $('p').eq(1).show('duration');
          $(this).hide();
        });


    })
    </script>
  </head> 
 
  <body>  

    <h3 id="fontTest">This is a Test</h3><br>
    <div id="swich">
      <button id="setBigFontSize">Big Font</button>
      <button id="setSmallFontSize">Small Font</button>
    </div>
    <hr>
    <div class="speech"> 
      <p>Fourscore and seven years ago our fathers brought forth  
           on this continent a new nation, conceived in liberty,  
           and dedicated to the proposition that all men are  
           created equal. 
      </p> 
       <p>Now we are engaged in a great civil war, testing whether  
       that nation, or any nation so conceived and so dedicated,  
       can long endure. We are met on a great battlefield of  
       that war. We have come to dedicate a portion of that  
       field as a final resting-place for those who here gave  
       their lives that the nation might live. It is altogether  
       fitting and proper that we should do this. But, in a  
       larger sense, we cannot dedicate, we cannot consecrate,  
       we cannot hallow, this ground. 
  </p> 
  <a href="#" class="more">read more...</a> 
</div>
  </body> 
</html>